<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>p7_表单练习</title>
</head>
<body>
    <!--form表示整个表单 action="#"表示将收集到的数据提交至当前页-->
    <!-- name设置控件的名字,不设置名字的控件无法提交值 -->
    <!--input控件: type属性用来设置控件的类型
       text文本框 password密码框 radio单选框 checkbox复选框
       date日期 color颜色 range范围 file文件
       submit提交按钮 reset重置按钮 button普通按钮-->
    <form action="#">
        姓名1:<input type="text" name="uname1"> <br>
        姓名2:<input type="text" name="uname2"> <br>
        <!-- value默认用来保存控件的值,也可以用于设置输入框的默认值 -->
        姓名3:<input type="text" name="uname3" value="rose"> <br>
        <!-- 单值属性:readonly只读(只能看不能改)  disabled禁用(不能改,且无法提交值)  -->
        姓名4:<input type="text" name="uname4" value="rose" readonly> <br>
        姓名5:<input type="text" name="uname5" value="rose" disabled> <br>
        <!-- placeholder占位提示文本 -->
        姓名6:<input type="text" name="uname6" placeholder="请输入用户名"> <br>
        <hr>
        密码:<input type="password" placeholder="请输入密码" name="pwd" maxlength="6"> <br>
        <!-- 多个单选选项必须设置相同的name才可以被分到同一组,实现单选!
             每个选项必须设置value才能提交值,不然提交的值都是on -->
        性别:
        <input type="radio" name="gender" value="1">男
        <input type="radio" name="gender" value="0" checked>女
        <br>
        爱好:
        <input type="checkbox" name="hobby" value="cy">抽烟
        <input type="checkbox" name="hobby" value="hj" checked>喝酒
        <input type="checkbox" name="hobby" value="tt" checked>烫头
        <input type="checkbox" name="hobby" value="java">学Java
        <br>
        生日:<input type="date" name="birthday"> <br>
        颜色:<input type="color" name="lc"> <br>
        范围:<input type="range" name="fw"> <br>
        文件:<input type="file" name="wj">
        <br>
        喜欢的城市:<select name="city">
            <option value="bj">北京</option>
            <option value="sh">上海</option>
            <option value="cc" selected>长春</option>
            <option value="gz">广州</option>
        </select>
        <br>
        <!-- 关联效果:点击文字即可选中复选框 -->
        <input type="checkbox" id="ok">
        <label for="ok">我同意以上协议</label>
        <br>
        <!-- 关联效果:点击文字即可选中输入框,且输入框有输入光标 I -->
        <label for="nickname">昵称:</label>
        <input type="text" id="nickname">
        <br>
        <!-- 多行文本域 -->
        留言板:<textarea cols="30" rows="3" style="resize: none;">请留言~</textarea>
        <hr>
        <input type="submit" value="点我提交">
        <input type="reset" value="点我重置">
        <input type="button" value="普通按钮">
        <button>h5新按钮</button>


    </form>
</body>
</html>